{% extends "base.html" %}

{% block title %}个人资料 - 妙趣拾光锦盒管理系统{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12 d-flex justify-content-between align-items-center">
        <h2 class="mb-0"><i class="fas fa-user-circle me-2"></i>个人资料</h2>
    </div>
</div>

<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm">
            <div class="card-body text-center">
                <div class="mb-3">
                    <div class="d-inline-block rounded-circle bg-primary text-white" style="width: 100px; height: 100px; line-height: 100px; font-size: 40px;">
                        {{ user.username[0].upper() if user.username else '?' }}
                    </div>
                </div>
                <h3 class="mb-2">{{ user.username }}</h3>
                <div class="mb-3">
                    <span class="badge bg-success mb-2">正常</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-edit me-2"></i>编辑个人资料</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('user.update_profile') }}" novalidate>
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" value="{{ user.username }}" readonly>
                        <small class="form-text text-muted">用户名不可修改</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email" value="{{ user.email or '' }}">
                    </div>
                    
                    <div class="mb-3">
                        <label for="phone" class="form-label">电话</label>
                        <input type="text" class="form-control" id="phone" name="phone" value="{{ user.phone or '' }}">
                    </div>
                    
                    <hr class="my-4">
                    <h5>修改密码</h5>
                    <p class="text-muted small">如需修改密码，请填写以下信息，否则可以留空</p>
                    
                    <div class="mb-3">
                        <label for="current_password" class="form-label">当前密码</label>
                        <input type="password" class="form-control" id="current_password" name="current_password">
                    </div>
                    
                    <div class="mb-3">
                        <label for="new_password" class="form-label">新密码</label>
                        <input type="password" class="form-control" id="new_password" name="new_password">
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                        <button type="reset" class="btn btn-secondary me-md-2">
                            <i class="fas fa-undo me-1"></i>重置
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>保存修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card shadow-sm">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>账号信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">用户ID</h6>
                        <p>{{ user.user_id }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">注册时间</h6>
                        <p>{{ user.create_time.strftime('%Y-%m-%d %H:%M:%S') if user.create_time else '未知' }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">最后登录</h6>
                        <p>{{ user.last_login.strftime('%Y-%m-%d %H:%M:%S') if user.last_login else '未登录' }}</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6 class="text-muted">用户类型</h6>
                        <p>
                            {% if user.is_admin %}
                            <span class="badge bg-danger">管理员</span>
                            {% else %}
                            <span class="badge bg-info">普通用户</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
